<template>
  <el-card>
    <el-form
      ref="addRef"
      :model="addData"
      :rules="rules"
    >
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="仓库编码">
            <el-input v-model="addData.code" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="仓库名称"
            prop="name"
          >
            <el-input
              v-model="addData.name"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="仓库类型"
            prop="type"
          >
            <el-select
              v-model="addData.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                label="中转仓"
                value="ZZ"
              />
              <el-option
                label="加工仓"
                value="JG"
              />
              <el-option
                label="储备仓"
                value="CB"
              />
              <el-option
                label="冷藏仓"
                value="LC"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="省/市/区">
            <el-cascader
              v-model="selectedOptions"
              size="large"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              style="width: 100%"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item
            label="详细地址"
            prop="address"
          >
            <el-input v-model="addData.address" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="仓库状态"
            prop="status"
          >
            <div class="radio">
              <el-radio-group v-model="addData.status">
                <el-radio
                  :label="1"
                >启用</el-radio>
                <el-radio
                  :label="0"
                >停用</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item
            label="仓库面积"
            prop="surface"
          >
            <el-input v-model="addData.surface" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="负责人"
            prop="personName"
          >
            <el-input
              v-model="addData.personName"
              maxlength="10"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="联系电话"
            prop="phone"
          >
            <el-input v-model="addData.phone" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row
        type="flex"
        justify="center"
      >
        <div>
          <el-button @click="goBack">返回</el-button>
          <el-button
            type="primary"
            @click="submit"
          >提交</el-button>
        </div>
      </el-row>

    </el-form>
  </el-card>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { addWareHouse, changeWareHouse } from '@/api'
// import Bus from '@/utils/bus'
export default {
  data() {
    return {
      selectedOptions: [],
      options: regionData,
      // 新增数据
      addData: {
        id: '',
        status: 1,
        province: '',
        city: '',
        area: '',
        code: '',
        address: '',
        location: ''
      },
      // 校验规则
      rules: {
        name: [{ required: true, message: '仓库名称不能为空！', trigger: 'blur' }],
        type: [{ required: true, message: '仓库类型不能为空！', trigger: 'blur' }],
        selectedOptions: [{ required: true, message: '省/市/区不能为空！', trigger: 'blur' }],
        status: [{ required: true, message: '仓库状态不能为空！', trigger: 'blur' }],
        personName: [{ required: true, message: '负责人不能为空！', trigger: 'blur' }, { min: 1, max: 10, message: '最大长度为10', trigger: 'blur' }],
        phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }]
      }
    }
  },
  created() {
    if (this.$route.params.id) {
      this.getData()
    } else {
      this.getCode()
    }
  },
  methods: {
    handleChange(value) {
      let loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]] + '/'
      }
      loc = loc.slice(0, loc.length - 1)
      console.log(this.selectedOptions)
      this.addData.province = this.selectedOptions[0]
      this.addData.city = this.selectedOptions[1]
      this.addData.area = this.selectedOptions[2]
      // this.addData.location = this.selectedOptions
      console.log(loc)
      this.addData.location = loc
      console.log(this.options)
      console.log(value)
    },
    // 提交
    submit() {
      this.$refs.addRef.validate(async(valid) => {
        if (!valid) return
        console.log(this.addData)
        if (this.$route.params.id) {
          await changeWareHouse(this.addData)
        } else {
          await addWareHouse(this.addData)
        }
        this.$refs.addRef.resetFields()
        this.$router.replace('/manage-base-info/warehouse')
      })
    },
    // 返回
    goBack() {
      this.$router.replace('/manage-base-info/warehouse')
    },
    // 获取下一个编码
    getCode() {
      this.addData.code = this.$route.params.code
      console.log(this.addData.code)
      console.log(this.$route.params.code)
    },
    // 点击编辑之后，路由接受参数，获取数据
    getData() {
      this.addData = this.$route.params.row
      console.log(this.addData)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  width: 100%;
}
.radio {
  margin-top: 40px;
}
.el-button {
  width: 200px;
  border-radius: 50px;
}
</style>
